<template>
    <div class="school">
        <div class="video-bg">
            <img class="bg-img" src="~/assets/images/school/bj-tc.png" alt="" />
            <img
                class="bg-img2"
                src="~/assets/images/school/bj-tc.png"
                alt=""
            />

            <div class="video-con">
                <div class="top">
                    <div class="left">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">
                                小竹首页
                            </el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/school/kzzt' }">
                                考证专题
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                {{
                                    selectVideo != null
                                        ? selectVideo.name
                                        : "考证专题"
                                }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="right">
                        <div
                            v-if="selectVideo"
                            class="collection"
                            @click="setCollect"
                        >
                            <i
                                :class="[
                                    selectVideo.is_collect == 1
                                        ? 'el-icon-star-on'
                                        : 'el-icon-star-off',
                                ]"
                            ></i>
                            收藏
                        </div>
                        <div class="back" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回课程列表
                        </div>
                    </div>
                </div>

                <div class="video-list">
                    <div class="video">
                        <video-dplayer
                            v-if="selectVideo != null"
                            ref="dplayer"
                            :url="selectVideo.video_file"
                            :pic="getOssUrl(selectVideo.cover_image)"
                            :rate="rate"
                            :isPlay="infoData.is_play"
                            @ratechange="ratechange"
                            @play="videoPlay"
                        ></video-dplayer>
                    </div>
                    <div class="list">
                        <div class="title">
                            视频选集
                            <div>共{{ videoNum }}节</div>
                        </div>
                        <div class="ji-list">
                            <el-menu
                                :default-active="defaultActive"
                                class="el-menu-vertical-demo"
                                background-color="#202127"
                                text-color="#fff"
                                active-text-color="#1C87F3"
                                @select="routerChang"
                            >
                                <template v-for="items in videoList">
                                    <template
                                        v-if="
                                            items.section &&
                                            items.section.length > 0
                                        "
                                    >
                                        <el-submenu
                                            :key="items.id"
                                            :index="items.id + ''"
                                        >
                                            <template slot="title">
                                                <span>{{ items.name }}</span>
                                            </template>
                                            <el-menu-item-group>
                                                <el-menu-item
                                                    v-for="item in items.section"
                                                    :key="item.id"
                                                    :index="item.id + ''"
                                                    >{{
                                                        item.name
                                                    }}</el-menu-item
                                                >
                                            </el-menu-item-group>
                                        </el-submenu>
                                    </template>
                                </template>
                            </el-menu>
                        </div>
                    </div>
                </div>

                <div class="select-classes">
                    选择班次
                    <div
                        v-for="(item, index) in classes"
                        :key="item.id"
                        class="classes"
                        :class="{ 'classes-s': classesIndex == index }"
                        @click="seltctClasses(item, index)"
                    >
                        {{ item.classes_text }}
                    </div>
                </div>
            </div>
        </div>

        <tabs v-model="tabsIndex" :list="tabsList"></tabs>

        <div class="relevant">
            <div class="left">
                <div v-show="tabsIndex == 0" class="handout">
                    <div
                        v-for="item in videoList"
                        :key="item.id"
                        class="handout-item"
                    >
                        <div class="title">
                            {{ item.name }}
                        </div>
                        <div class="download" @click="handoutDownload(item)">
                            <i class="el-icon-download"></i>下载
                        </div>
                    </div>
                </div>

                <div
                    v-show="tabsIndex == 1"
                    class="introduce"
                    v-html="brief"
                ></div>

                <template v-if="tabsIndex == 2">
                    <div v-if="userInfo" class="user-comment">
                        <div class="avatar">
                            <el-image
                                v-if="userInfo.avatar"
                                class="img"
                                :src="userInfo.avatar"
                                fit="cover"
                                alt=""
                            ></el-image>
                        </div>
                        <el-input
                            v-model="comment"
                            class="comment-input"
                            placeholder="评论千万条，等你发一条"
                        ></el-input>
                        <el-button
                            type="primary"
                            class="comment-but"
                            :disabled="!comment"
                            @click="addCollegeComment"
                        >
                            发布
                        </el-button>
                    </div>

                    <div v-if="commentList.length > 0" class="comment-list">
                        <comment-item
                            v-for="item in commentList"
                            :key="item.id"
                            :item="item"
                        ></comment-item>
                    </div>
                    <div v-else class="no-comment">
                        <el-empty description="没有评论，快来占沙发"></el-empty>
                    </div>
                </template>
            </div>

            <div class="right wx-gzh">
                <div class="title" :style="{ background: `url(${xgtjBg})` }">
                    <img
                        src="~/assets/images/school/xgtj-icon.png"
                        alt="相关推荐"
                    />
                    限时<span>免费资料</span>
                </div>

                <div class="xgtj-list">
                    <!-- <div
                        v-for="item in likeList"
                        :key="item.id"
                        class="xgtj-item"
                        @click="goTJ(item)"
                    >
                        <el-image
                            class="xgtj-img"
                            :src="getOssUrl(item.cover_image)"
                            fit="cover"
                            alt=""
                        ></el-image>
                        <div class="info">
                            <div class="title">
                                {{ item.name }}
                            </div>
                            <div class="other">{{ item.page_view }}人学过</div>
                        </div>
                    </div> -->
                    <div class="kc-list">
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            初级课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            中级课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            CPA课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            审计课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            税务师课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            实操课程
                        </div>
                    </div>
                    <div class="wx-gzh-but">扫码领取全部资料</div>
                    <div class="wx-gzh-img">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                            alt=""
                        />
                        微信扫一扫领取
                    </div>
                </div>
            </div>
        </div>

        <!-- 购买弹窗 -->
        <el-dialog title="支付小竹叶" :visible.sync="payShow" width="408px">
            <div class="pay-dialog">
                <div v-if="infoData" class="money">
                    {{ infoData.base.money }}
                </div>
                <div class="money-text">小竹叶</div>
                <div v-if="userInfo != null" class="cell">
                    当前小竹叶：{{ userInfo.money }}，
                    <el-popover placement="bottom" width="126" trigger="hover">
                        <div class="app-code">
                            <img
                                src="~/assets/images/index/app_code.png"
                                alt="小竹财税APP"
                            />
                        </div>
                        <span slot="reference">下载APP</span>
                    </el-popover>
                    去充值
                </div>
                <div class="cell">
                    温馨提示：充值会员可以免费观看，
                    <el-popover placement="bottom" width="126" trigger="hover">
                        <div class="app-code">
                            <img
                                src="~/assets/images/index/app_code.png"
                                alt="小竹财税APP"
                            />
                        </div>
                        <span slot="reference">下载APP</span>
                    </el-popover>
                    去充值
                </div>
                <div class="but">
                    <el-popconfirm
                        title="确认购买该课程"
                        confirm-button-text="购买"
                        :hide-icon="true"
                        @confirm="opencourse"
                    >
                        <el-button
                            slot="reference"
                            type="primary"
                            class="but-pay"
                            round
                        >
                            确定支付
                        </el-button>
                    </el-popconfirm>
                </div>
            </div>
        </el-dialog>
        <!-- end -->
    </div>
</template>

<script>
// api
import {
    getCollegeDetail,
    getCollegeList,
    addCollegeComment,
    setCollect,
    courseBuy,
    addstudyrecord,
    getVideorecord,
} from "@/assets/api/schoolApi.js";
import { getanalysedata2 } from "@/assets/api/indexApi";

import { mapState, mapMutations, mapActions } from "vuex";

import videoDplayer from "@/components/school/videoDplayer.vue";
import commentItem from "@/components/school/commentItem.vue";

import tabs from "@/components/index/tabs.vue";

import { getOssUrl, getText, goTopSmooth } from "@/assets/utils/utils.js";

import xgtjBg from "@/assets/images/school/xgtj-bg.png";

export default {
    components: {
        videoDplayer,
        tabs,
        commentItem,
    },
    async asyncData({ params }) {
        let data = {
            commentList: [],
            videoList: [],
            infoData: null,
            id: 0,
            mateInfo: {
                title: "考证专题",
                description: "",
            },
            brief: "",
            classesIndex: 0,
            tabsList: [
                { name: "课程讲义" },
                { name: "课程介绍" },
                { name: "评论" },
            ],
        };

        data.id = params.id.replace(".html", "");

        const res = await getCollegeDetail({
            id: data.id,
        });
        if (res.code == 1) {
            data.videoList = res.data.chapter;
            data.commentList = res.data.comment;
            data.infoData = res.data;
            data.mateInfo.title = res.data.base.name;
            data.mateInfo.description = getText(res.data.base.abstract);

            // 获取课程介绍
            for (let i = 0; i < res.data.classes.length; i++) {
                if (res.data.base.id == res.data.classes[i].id) {
                    data.brief = res.data.classes[i].brief;
                    data.classesIndex = i;
                }
            }

            if (data.commentList.length > 0)
                data.tabsList[2].name = `评论(${data.commentList.length})`;
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税学院,小竹学院",
                },
            ],
        };
    },
    data() {
        return {
            xgtjBg: xgtjBg,
            getOssUrl: getOssUrl,
            tabsIndex: 0,
            tabsList: [
                { name: "课程讲义" },
                { name: "课程介绍" },
                { name: "评论" },
            ],
            comment: "",

            // videoList: [],

            // commentList: [],

            selectVideo: null,

            // infoData: null,

            likeList: [],

            defaultActive: "",

            // id: 0,

            classes: [],
            // classesIndex: 0,

            // 购买弹窗
            payShow: false,
            // 是否购买
            coursepay: "",

            // 课程介绍富文本
            // brief: "",

            mateInfo: {
                title: "考证专题",
                description: "",
            },

            // 初始倍速
            rate: 1,

            playbackRecordStart: true,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),

        videoNum: function () {
            let num = 0;
            for (let item of this.videoList) {
                num += item.section.length;
            }
            return num;
        },
    },
    watch: {
        // userInfo: function (nv) {
        //     if (this.userInfo != null) {
        //         this.getData();
        //     }
        // },
        $route(to, from) {
            try {
                if (window && to) {
                    if (to.params.kcId)
                        this.select(to.params.kcId.replace(".html", ""));
                }
            } catch (error) {}
        },
    },
    created() {},
    mounted() {
        let token = localStorage.getItem("token");

        // this.id = this.$route.params.id.replace(".html", "");
        this.setmenuIndex("60");
        let that = this;
        this.getData2();
        if (token) {
            this.getUserInfo2().then((user) => {
                if (user) {
                    // that.getVideorecord();
                }
            });
        }
        this.$nextTick(() => {
            goTopSmooth();
        });

        getanalysedata2({
            m_id: 8,
            type: 1,
            code: "PF4",
            describe: this.mateInfo.title,
        });
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex", "setloginShow"]),
        ...mapActions("common", ["getUserInfo", "getUserInfo2"]),

        // 选择班次
        seltctClasses(item, index) {
            if (index == this.classesIndex) return;
            this.id = item.id;
            this.classesIndex = index;
            // this.selectVideo = null

            // this.videoList = []
            // this.commentList = []
            // this.defaultActive = ''
            // this.infoData = {}
            // this.classes = []
            this.getData();
        },

        async getData() {
            const res = await getCollegeDetail({
                id: this.id,
            });
            if (res.code == 1) {
                this.videoList = res.data.chapter;
                this.commentList = res.data.comment;
                this.infoData = res.data;
                this.mateInfo.title = res.data.base.name;
                this.mateInfo.description = getText(res.data.base.abstract);

                // 获取课程介绍
                for (let i = 0; i < res.data.classes.length; i++) {
                    if (res.data.base.id == res.data.classes[i].id) {
                        this.brief = res.data.classes[i].brief;
                        this.classesIndex = i;
                    }
                }

                if (this.commentList.length > 0)
                    this.tabsList[2].name = `评论(${this.commentList.length})`;

                if (this.selectVideo != null) {
                    this.switchVideo(res.data.chapter[0].section[0]);
                } else {
                    if (this.$route.params.kcId)
                        this.select(
                            this.$route.params.kcId.replace(".html", "")
                        );
                    else this.selectVideo = res.data.chapter[0].section[0];
                }

                // this.defaultActive = res.data.chapter[0].section[0].id + "";
                // if (this.$route.params.kcId)
                this.defaultActive = this.$route.params.kcId.replace(
                    ".html",
                    ""
                );
                this.classes = res.data.classes;

                if (this.userInfo) {
                    // 会员权益验证 12.27 去会员化
                    // this.checkVipPay();
                    // 获取播放记录
                    this.getVideorecord();
                }
                getanalysedata2({
                    m_id: 8,
                    type: 1,
                    code: "PF4",
                    describe: res.data.base.name,
                });
                // 获取相关推荐
                // this.getList();
            } else {
                this.id = this.id;
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },
        async getData2() {
            const res = await getCollegeDetail({
                id: this.id,
            });

            if (res.code == 1) {
                this.infoData = res.data;
                this.videoList = res.data.chapter;
            }
            if (this.selectVideo != null) {
                this.switchVideo(this.infoData.chapter[0].section[0]);
            } else {
                if (this.$route.params.kcId)
                    this.select(this.$route.params.kcId.replace(".html", ""));
                else this.selectVideo = this.infoData.chapter[0].section[0];
            }
            // this.defaultActive = this.infoData.chapter[0].section[0].id + "";
            // if (this.$route.params.kcId)
            this.defaultActive = this.$route.params.kcId.replace(".html", "");
            this.classes = this.infoData.classes;

            // if (this.userInfo) {
            //     // 会员权益验证 12.27 去会员化
            //     // this.checkVipPay();
            //     // 获取播放记录
            //     this.getVideorecord();
            // }
        },

        // 获取播放记录
        async getVideorecord() {
            const res = await getVideorecord({});
            for (let item of res.data) {
                if (item.course_id == this.infoData.base.id) {
                    let that = this;
                    setTimeout(() => {
                        that.select(item.college_id);
                        that.defaultActive = item.college_id + "";

                        setTimeout(() => {
                            that.$refs.dplayer.seek(parseInt(item.speed));
                        }, 1000);
                    }, 600);
                }
            }
        },

        checkVipPay() {
            if (this.infoData.base.is_play != 1) {
                let message = "";
                if (
                    this.infoData.base.ptype == 21 &&
                    this.userInfo.is_vip == 0
                ) {
                    message = `观看该课程需要升级为大会员 <a style='color: #1C87F3;text-decoration: underline;' href='${window.location.origin}/user/myvip?vip=0'>前往购买会员</a>`;
                }
                if (
                    this.infoData.base.ptype == 22 &&
                    this.userInfo.is_vip < 2
                ) {
                    message = `观看该课程需要升级为超级会员 <a style='color: #1C87F3;text-decoration: underline;' href='${window.location.origin}/user/myvip?vip=1'>前往购买会员</a>`;
                }
                if (message)
                    this.$message({
                        message: message,
                        type: "warning",
                        dangerouslyUseHTMLString: true,
                        showClose: true,
                        duration: 0,
                        customClass: "big-top-el-message",
                    });
            }
        },

        // 获取相关推荐
        async getList() {
            const res = await getCollegeList({
                type: 3,
                page: 1,
                limit: 10,
                kz_type: this.infoData.base.ptype,
            });

            if (res.code == 1) {
                this.likeList = res.data.relevant;
            }
        },

        // 评论
        async addCollegeComment() {
            const res = await addCollegeComment({
                id: this.id,
                info: this.comment,
            });
            this.comment = "";
            if (res.code == 1) {
                this.getComment();
            }
        },

        // 获取评论
        async getComment() {
            const res = await getCollegeDetail({
                id: this.id,
            });
            if (res.code == 1) {
                this.commentList = res.data.comment;
                if (this.commentList.length > 0)
                    this.tabsList[2].name = `评论(${this.commentList.length})`;
            }
        },

        async setCollect() {
            const res = await setCollect({
                id: this.selectVideo.id,
            });
            if (res.code == 1) {
                this.selectVideo.is_collect == 1
                    ? (this.selectVideo.is_collect = 0)
                    : (this.selectVideo.is_collect = 1);
            }
        },

        // 购买课程
        async opencourse() {
            const res = await courseBuy({
                id: this.id,
            });
            if (res.code == 1) {
                this.$message({
                    message: res.data,
                    type: "success",
                });
                this.payShow = false;
                this.getUserInfo();
                this.getData();
            } else {
                this.$message({
                    message: res.data,
                    type: "warning",
                });
            }
        },

        // 倍速切换
        ratechange(rate) {
            // console.log(rate)
            this.rate = rate;
        },

        // 视频开始播放
        videoPlay() {
            if (!this.userInfo) {
                this.$refs.dplayer.onPause();
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            // 非会员判断是否购买了课程 12.27 去会员化
            // if (
            //     this.userInfo.is_vip == 0 &&
            //     this.infoData.base.is_play == "0"
            // ) {
            //     this.$refs.dplayer.onPause();
            //     // this.checkVipPay();
            //     // 非会员并且未购买视频
            //     // this.payShow = true; // 弹出购买弹窗
            // } else {
            //     if (this.playbackRecordStart)
            //         this.$nextTick(() => {
            //             this.playbackRecord();
            //         });
            // }

            if (this.playbackRecordStart)
                this.$nextTick(() => {
                    this.playbackRecord();
                });
        },

        // 播放记录
        async playbackRecord() {
            this.playbackRecordStart = false;
            try {
                if (
                    parseInt(
                        this.$refs.dplayer.$refs.player.dp.video.currentTime
                    ) > 60 &&
                    !this.$refs.dplayer.$refs.player.dp.video.paused
                )
                    await addstudyrecord({
                        speed: parseInt(
                            this.$refs.dplayer.$refs.player.dp.video.currentTime
                        ),
                        course_id: this.infoData.base.id,
                        type: 1,
                        college_id: this.selectVideo.id,
                        alltime: parseInt(
                            this.$refs.dplayer.$refs.player.dp.video.duration
                        ),
                    });
            } catch (error) {}

            setTimeout(() => {
                this.playbackRecord();
            }, 5000);
        },

        routerChang(e) {
            this.$router.push({
                path: `/school/Certificate/${this.id}/${e}.html`,
            });
        },

        select(e) {
            for (let items of this.videoList) {
                if (items.section && items.section.length > 0) {
                    for (let item of items.section) {
                        if (e == item.id) {
                            this.switchVideo(item);
                            return;
                        }
                    }
                }
            }
        },

        handoutDownload(item) {
            // console.log(item)
            window.open(item.handout);
        },

        // 切换视频
        switchVideo(item) {
            // if (this.selectVideo != null && this.selectVideo.id == item.id) return
            this.selectVideo = item;
            if (this.$refs.dplayer && this.$refs.dplayer.$refs.player.dp)
                this.$refs.dplayer.$refs.player.dp.switchVideo({
                    url: getOssUrl(item.video_file),
                    pic: getOssUrl(item.cover_image),
                });
        },

        goTJ(item) {
            // let { href } = this.$router.resolve({
            //     path: "/school/school/seefat",
            //     query: { id: item.id },
            // });
            // window.open(href, "_blank");
            this.$router.push({
                path: "/school/seefat/" + item.id + ".html",
            });
        },

        back() {
            // this.$router.back();
            this.$router.push({
                path: "/school/kzzt",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/static/payDialog.scss";

.video-bg {
    background: #0f0f1e;
    height: 700px;
    position: relative;
    overflow: hidden;

    .bg-img,
    .bg-img2 {
        position: absolute;
        width: 470px;
        height: 471px;
        z-index: 0;
    }

    .bg-img {
        top: 350px;
        left: -120px;
        transform: rotate(164deg);
    }

    .bg-img2 {
        top: -169px;
        right: -95px;
    }
}

.video-con {
    width: 1200px;
    padding: 25px 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right {
            font-size: 14px;
            color: #ffffff;
            display: flex;

            .collection {
                margin-right: 77px !important;
            }

            .el-icon-star-on {
                color: #e6a23c;
            }

            .collection,
            .back {
                cursor: pointer;
            }
        }
    }
}

.video-list {
    height: 514px;
    background: #000000;
    margin-top: 27px;
    display: flex;
    justify-content: center;

    .video {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
        min-width: 308px;
        background: #202127;
        box-sizing: border-box;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            border-bottom: 1px solid #303030;
            padding: 20px 22px;

            > div {
                font-size: 12px;
                color: #b9b9b9;
            }
        }

        .ji-list {
            // padding: 0 22px;
            height: 450px;
            overflow-y: scroll;
            overflow-x: hidden;

            &::v-deep .el-submenu__title {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .ji-item {
                line-height: 60px;
                height: 60px;
                border-bottom: 1px solid #2f2f2f;
                font-size: 14px;
                color: #ffffff;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }

            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: #2f2f2f;
            }

            &::-webkit-scrollbar-track {
                border-radius: 0;
            }
        }
    }
}

.relevant {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 66px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
        width: 855px;
        background: #ffffff;
        border-radius: 10px;
        padding: 46px 37px;
        box-sizing: border-box;

        .user-comment {
            display: flex;
            align-items: center;

            .avatar {
                width: 50px;
                height: 50px;
                margin-right: 15px;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .img {
                    width: 36px;
                    height: 36px;
                    border-radius: 36px;
                    overflow: hidden;
                }
            }

            .comment-input {
                width: 633px;
                height: 43px;
                border-radius: 4px 4px 4px 4px;
            }

            .comment-but {
                margin-left: 15px;
            }
        }
    }

    .right {
        width: 325px;
        background-color: #ffffff;
        border-radius: 10px 10px 10px 10px;
        overflow: hidden;
        box-sizing: border-box;

        > .title {
            height: 60px;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #333333;

            span {
                color: #fa5151;
            }

            img {
                width: 25px;
                height: 25px;
                margin-right: 7px;
                margin-left: 32px;
            }
        }
    }
}

.xgtj-list {
    padding: 0 24px;
    padding-top: 7px;
}

.xgtj-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 27px;

    &:hover .title {
        color: #1c87f3 !important;
    }

    .xgtj-img {
        min-width: 127px;
        height: 81px;
        border-radius: 4px 4px 4px 4px;
    }

    .info {
        padding-left: 18px;

        .title {
            font-size: 14px;
            color: #333333;
            height: 41px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .other {
            font-size: 12px;
            color: #999999;
            padding-top: 20px;
        }
    }
}

.comment-list {
}

.select-classes {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    margin-top: 36px;

    .classes {
        padding: 0 15px;
        height: 33px;
        color: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #ffffff;
        line-height: 33px;
        text-align: center;
        margin-left: 16px;
        cursor: pointer;
        font-size: 14px;
    }

    .classes-s {
        border: 1px solid #1c87f3;
        background: #1c87f3;
    }
}

.handout {
    .handout-item {
        height: 70px;
        line-height: 70px;
        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13px;
        box-sizing: border-box;
        padding: 0 30px;
        border-radius: 6px;
        font-size: 16px;
        color: #333333;

        .title {
        }

        .download {
            cursor: pointer;

            i {
                // font-size: 20px;
                margin-right: 2px;
            }
        }
    }
}

.introduce {
    font-size: 14px;
    color: #333333;
    line-height: 30px;
    min-height: 400px;
    ::v-deep p,
    a,
    span {
    }
    ::v-deep img {
        max-width: 100%;
        height: auto !important;
        display: block;
        margin: 0 auto;
        cursor: pointer;
    }
}

::v-deep .user-comment .el-input__inner {
    background: #f5f5f5;
    border-width: 0;
}

::v-deep .el-breadcrumb__item .is-link {
    font-size: 14px;
    color: #9e9e9e !important;
}

::v-deep .el-breadcrumb__inner {
    font-size: 14px;
    color: #ffffff !important;
}

::v-deep .el-menu {
    border-right-width: 0;
}

::v-deep .el-submenu .el-menu-item {
    // max-width: 270px;
    width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
}

.wx-gzh {
    position: sticky;
    top: 95px;
}

.kc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .kc-item {
        width: 90px;
        text-align: center;
        font-size: 15px;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
        img {
            width: 46px;
            height: 46px;
            margin: 0 auto;
            display: block;
            padding-top: 5px;
        }
    }
}

.wx-gzh-but {
    width: 258px;
    height: 45px;
    background: #ff8f1f;
    border-radius: 65px;
    font-size: 18px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 45px;
    text-align: center;
    margin: 23px auto;
}
.wx-gzh-img {
    text-align: center;
    font-size: 14px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    color: #9e9e9e;
    padding-bottom: 20px;
    img {
        width: 157px;
        height: 157px;
        display: block;
        margin: 0 auto 7px;
    }
}
</style>

<style>
.el-popover {
    min-width: 100px !important;
}
</style>